<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/label' }">标签</el-breadcrumb-item>
      <el-breadcrumb-item
        :to="{ path: $route.path, query: { name: $route.query.name } }"
      >
        {{ $route.query.name }}
      </el-breadcrumb-item>
      <el-breadcrumb-item>标签动态</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="label-tab">
      <el-tabs value="question" type="card" @tab-click="handleClick">
        <el-tab-pane label="技术问答" name="question">
          <question-list
            name="question"
            :page="page"
            :listData="questionList"
            @fetch-data="fetchData"
          />
        </el-tab-pane>
        <el-tab-pane label="博客文章" name="article">
          <ArticleList
            name="article"
            :page="page"
            :listData="articleList"
            @fetch-data="fetchData"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>


<script>
import QuestionList from "@/components/question/List";
import ArticleList from "@/components/article/List";

export default {
  components: { QuestionList, ArticleList },

  // 校验标签id
  validate({ params }) {
    return /^\d+$/.test(params.id);
  },

  data() {
    return {
      articleList: [], // 文章列表数据
    };
  },

  methods: {
    handleClick(tab) {
      // 切换标签页查询对应第1页的数据
      this.fetchData(tab.paneName, 1);
    },

    // 切换页码时查询（标签页的名字，当前页码）
    async fetchData(paneName, current) {
      this.page.current = current;
      // 请求接口响应的对象
      let response = null;
      switch (paneName) {
        case "question":
          // 查询技术问答列表
          response = await this.$getQuestionListByLabelId(
            this.page,
            this.$route.params.id
          );
          // 总记录数(首次加载的时候记录总数，后面点击分页发请求不再变化总数)
          if (this.page.current === 1) this.page.total = response.data.total;
          this.questionList = response.data.records;
          break;
        case "article":
          // 查询博客文章列表。
          // getArticleList 可接收分类id和标签id作为查询条件，并封装在同一对象中
          const query = { ...this.page, labelId: this.$route.params.id };
          response = await this.$getArticleList(query);
          // 总记录数(首次加载的时候记录总数，后面点击分页发请求不再变化总数)
          if (this.page.current === 1) this.page.total = response.data.total;
          // 列表数据
          this.articleList = response.data.records;
          break; // 不要少了
        default:
          break;
      }
    },
  },

  async asyncData({ params, app }) {
    // 首次加载页面，查询技术问答列表
    const page = {
      // 分页对象
      current: 1,
      size: 20,
      total: 0,
    };
    // 查询
    const { data } = await app.$getQuestionListByLabelId(page, params.id);
    page.total = data.total;

    return { page, questionList: data.records };
  },
};
</script>
<style scoped>
.label-tab {
  margin-top: 30px;
}
</style>